Web Storage 可以讓我們儲存資料在使用者的瀏覽器中，有兩種存儲方式可以使用：
Window.localStorage
Window.sessionStorage
兩者的差別在於：
Window.localStorage 的資料會永久儲存，直到被使用者刪除。Window.sessionStorage 的資料會在網頁關閉後清空，只要該網頁沒被關閉或者有還原(restore)該頁面，資料就會保存。Storage 有以下方法可以使用：
// 傳入key與value，會新增此key與value
localStorage.setItem();
sessionStorage.setItem();
// 傳入一key，會返回對應此key的value
localStorage.getItem();
sessionStorage.getItem();
// 傳入一key，會刪除此key與對應的value
localStorage.removeItem();
sessionStorage.removeItem();
// 執行此方法，會刪除所有的key與對應的value
localStorage.clear();
sessionStorage.clear();
有一點要注意，不管 key 與 value 是什麼類型的資料，都會將兩者轉型為字串再存入Storage。
Example：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript－Web Storage</title>
<script>
sessionStorage.setItem('content', 'Web Storage');
</script>
</head>
<body>
<div class="content"></div>
<script>
var content = document.querySelector('.content');
content.innerText = sessionStorage.getItem('content');
</script>
</body>
</html>
以上程式大致分為兩部分：
sessionStorage.setItem('content', 'Web Storage');
此時 Storage 中的資料如下：
| Key | Value |
|---|---|
| "content" | "Web Storage" |
content.innerText = sessionStorage.getItem('content');
因為是使用 sessionStorage 所以在網頁關閉後，資料就會清空。
網頁關閉後 Storage 中的資料如下：
| Key | Value |
|---|---|
iThome鐵人賽
看影片追技術
看更多